The base of Frint
With npm:
$ npm install --save frint
Via unpkg CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
<script src="https://unpkg.com/frint@latest/dist/frint.min.js"></script>
<script>
// available as `window.Frint`
</script>
Root App: The top-most parent App, where other Apps get registered to.App: Apps that register themselves to Root App.Provider: Dependency for your apps.Let's import the necessary functions from the library first:
const Frint = require('frint');
const { createApp } = Frint;
Now we can create our App:
const RootApp = createApp({ name: 'MyAppName' });
Instantiate the Root app:
const app = new RootApp(); // now you have the Root app's instance
// usually we set the root app to `window.app`,
// so apps coming in from separate bundles can register themselves
window.app = app;
const { createApp } = Frint;
const MyApp = createApp({ name: 'MyAppName' });
To register the App in your Root App:
window.app.registerApp(MyApp);
Providers are dependencies for your Frint application (not to be confused with npm packages).
They can be set at Root app level, at App level, or even only at Root app level but cascade them to other Apps.
For values that are already known:
const RootApp = createApp({
name: 'MyAppName',
providers: [
{
name: 'foo',
useValue: 'foo value here'
}
]
});
const app = new RootApp();
app.get('foo') === 'foo value here';
If you want to get the value from a function (will be called only once during App construction):
const RootApp = createApp({
name: 'MyAppName',
providers: [
{
name: 'bar',
useFactory: function () {
return 'bar value';
}
},
]
});
const app = new RootApp();
app.get('bar') === 'bar value';
You can also have classes defined as providers. They will be instantiated when the App is constructed, and then made available to you:
class Baz {
getValue() {
return 'baz value';
}
}
const RootApp = createApp({
name: 'MyAppName',
providers: [
{
name: 'baz',
useClass: Baz
}
]
});
const app = new RootApp();
app.get('baz').getValue() === 'baz value';
If you wish to cascade a provider from Root App to other Apps, you can:
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'window',
useValue: window, // the global `window` object
cascade: true,
}
]
});
const MyApp = createApp({
name: 'MyApp'
});
const app = new RootApp();
app.registerApp(MyApp);
app.get('window') === window;
app.getAppInstance('MyApp').get('window') === window;
app: The current App in scoperootApp: Always refers to the top-most App (which is Root)Providers can also list their dependencies (by their names).
class Baz {
constructor({ foo, bar, app }) {
// I have access to both `foo` and `bar` here.
// And I can access the scoped `app` instance too.
}
}
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'foo',
useValue: 'foo value'
},
{
name: 'bar',
useFactory: function ({ foo }) {
return `In bar, I have foo's value: ${foo}`
},
deps: ['foo'] // value's of provider names listed here will be fed as arguments
},
{
name: 'baz',
useClass: Baz,
deps: ['foo', 'bar', 'app']
}
],
})
When cascading providers from Root to other Apps, it is likely you may want to scope those values by the App they are targeting. It is applicable in only useFactory and useClass usage, since they generate values.
const RootApp = createApp({
name: 'MyRootApp',
providers: [
{
name: 'theNameOfTheApp',
useFactory: function ({ app }) {
return app.app.getName();
},
deps: ['app'],
cascade: true,
scoped: true,
}
]
});
const MyApp = createApp({
name: 'MyApp'
});
const app = new RootApp();
app.registerApp(MyApp);
app.get('theNameOfTheApp') === 'MyRootApp';
app.getAppInstance('MyApp').get('theNameOfTheApp') === 'MyApp';
App
The base App class.
createApp(options)
options (Object)
options.name: (String [required]): Name of your App.options.initialize: (Function [optional]): Called when App is constructed.options.beforeDestroy: (Function [optional]): Called when App is about to be destroyed.options.providers: (Array [optional]): Array of provider objects.App: App class.
const app = new App();
The App instance
app.getOption(key)
key (String)Any.
app.getOption('name') would give you MyAppName string.
app.getName()
String: The App's name.
app.getRootApp()
App: Gives you the Root App instance.
app.getParentApp()
App: Gives you the immediate Parent App instance.
app.getParentApps()
Array: Array of parent apps, with immediate parent app as first element and the root app being the last.
app.getProviders()
Gives you an array of provider definitions as passed while creating the App class.
Array: Array of provider definitions as passed while creating the App class.
app.getProvider(name)
Gives you the provider's original definition.
name (String): The name of the provider that you wantObject: The provider definition
Not to be confused with the computed value of the provider.
app.get(name)
Gives you the computed value of the provider.
name (String): The name of the providerAny: The computed value of the provider.
app.getApps$(regionName = null)
regionName (String [optional]): Filter the list of apps by region names if neededObservable: That emits an array of most recent available Apps.
app.registerApp(App, options = {})
Register App class to Root app.
App (App): The App class.options (Object [optional])
name (String [optional]): If the App's name needs to be overridden.multi (Boolean [optional]): If the App is a multi-instance app (defaults to false)void
app.hasAppInstance(name, region = null, regionKey = null)
Check if App instance is available or not.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.Boolean: A flag indicating whether an App instance whose name matches the provided name parameter is available or not
app.getAppInstance(name, region = null, regionKey = null)
Gets the App instance if available.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.App|Boolean: The app instance, or false if not availble.
app.getAppOnceAvailable$(name, region = null, regionKey = null)
Returns an Observable, which emits with the App's instance once it is available.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.Observable: Emits the App instance once found, only once.
app.instantiateApp(name, region = null, regionKey = null)
Instantiates the registered App class, (for the targetted region/regionKey if it is a multi-instance App).
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.Array: The updated collection of apps.
app.destroyApp(name, region = null, regionKey = null)
Destroys App instance.
name (String): The name of the App that you are looking forregion (String [optional]): If you want the App of a specific regionregionKey (String [optional]): If it is a multi-instance App, then the lookup can be scoped by region's keys.void.
FAQs
Core plugin for Frint
The npm package frint receives a total of 136 weekly downloads. As such, frint popularity was classified as not popular.
We found that frint demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."